<template>
  <div>
    <a-form :form="form" style="max-width: 500px; margin: 40px auto 0;">
      <a-alert
        :closable="true"
        show-icon
        message="确认提交后，订单将直接发给审核员进行审核，无法退回。"
        style="margin-bottom: 5px;"/>
      <a-form-item
        label="订单编号"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText">
        <p v-decorator="['code']">{{ form.getFieldValue('code') }}</p>
      </a-form-item>
      <a-form-item
        label="供应商"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText">
        <p v-decorator="['supplier']">{{ form.getFieldValue('supplier') }}</p>
      </a-form-item>
      <a-form-item
        label="物品列表"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText">
        <stuffInfo :length="subLength" :hasDeleteButton="false" :hasAddButton="false" :disabled="true"/>
      </a-form-item>
      <a-form-item
        label="采购员"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText">
        <p v-decorator="['purchaser']">{{ form.getFieldValue('purchaser') }}</p>
      </a-form-item>
      <a-form-item
        label="总金额"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText">
        <p v-decorator="['money']">{{ form.getFieldValue('money') }}</p>
      </a-form-item>
      <a-form-item
        label="审核员"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText">
        <p v-decorator="['auditor']">{{ form.getFieldValue('auditor') }}</p>
      </a-form-item>
      <a-form-item
        label="采购时间"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText">
        <p v-decorator="['purchaseTime']">{{ form.getFieldValue('purchaseTime') }}</p>
      </a-form-item>
      <a-divider />
      <a-form-item
        label="采购备注"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        class="stepFormText">
        <p v-decorator="['purchaseRemark']">{{ form.getFieldValue('purchaseRemark') }}</p>
      </a-form-item>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <a-button :loading="loading" type="primary" @click="nextStep">提交</a-button>
        <a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import stuffInfo from './stuffInfo'
import storage from 'store'
import randomCode from '../utils/randomCode'
import cloneDeep from 'lodash.clonedeep'
import { add } from '@/api/purchase'

export default {
  name: 'Step2',
  components: { stuffInfo },
  data () {
    return {
      randomCode: randomCode(),
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } },
      form: this.$form.createForm(this),
      subLength: 1,
      loading: false,
      timer: 0
    }
  },
  created () {
    const info = storage.get('purchaseDetail')
    const _this = this
    _this.form.getFieldDecorator('code')
    _this.form.getFieldDecorator('purchaser')
    _this.form.getFieldDecorator('purchaseTime')
    if (info) {
      _this.subLength = info.name.length
      for (let i = 0; i < info.name.length; i++) {
        _this.form.getFieldDecorator(`name[${i}]`)
        _this.form.getFieldDecorator(`type[${i}]`)
        _this.form.getFieldDecorator(`unit[${i}]`)
        _this.form.getFieldDecorator(`price[${i}]`)
        _this.form.getFieldDecorator(`amount[${i}]`)
      }
      _this.form.setFieldsValue({
        code: _this.randomCode,
        purchaser: _this.$store.getters.nickname,
        purchaseTime: randomCode(true)
      })
      _this.$nextTick(() => {
        _this.form.setFieldsValue(info)
      })
    }
  },
  methods: {
    nextStep () {
      const that = this
      that.loading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          const data = cloneDeep(values)
          const supplies = []
          for (let i = 0; i < data.name.length; i++) {
            supplies.push({
              name: data.name[i],
              amount: data.amount[i],
              price: data.price[i],
              type: data.type[i],
              unit: data.unit[i]
            })
          }
          delete data.name
          delete data.amount
          delete data.price
          delete data.type
          delete data.unit
          data.supplies = supplies

          add(data)
          .then(res => {
            console.log(res.data)
          })

          that.timer = setTimeout(function () {
            that.loading = false
            that.$emit('nextStep', data.code)
          }, 1000)
        } else {
          that.loading = false
        }
      })
    },
    prevStep () {
      this.$emit('prevStep')
    }
  },
  beforeDestroy () {
    clearTimeout(this.timer)
  }
}
</script>

<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 5px;
    /deep/ .ant-form-item-label {
      line-height: 30px;
    }
    /deep/ .ant-form-item-control {
      line-height: 30px;
    }
  }
  p {
    margin-bottom: 0px;
  }
  /deep/ .ant-divider-horizontal {
    margin-top: 5px;
    margin-bottom: 5px;
  }
</style>
